import {messages} from "share/common";
import errorMessage from 'share/errorMessage'
import React from 'react'
import { connect } from 'react-redux'
import SearchArea from 'components/search-area'
import { Table, Popover } from 'antd'
import creditManagementService from 'containers/credit-setting/credit-management/credit-management.service'
import Control from 'components/control'
class EmployeeCredit extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      searchForm: [{
        type: 'input', id: 'keyword', label: messages('credit-setting.key14')/*员工*/, placeholder: messages('credit-setting.key25')/*请输入员工姓名/工号*/
      },{
        type: 'list',
        id: 'companyOID',
        label: messages('credit-setting.key26')/*公司*/,
        listType: 'available_company',
        labelKey: 'name',
        valueKey: 'companyOID',
        single: true
      }],
      columns: [{
        title: messages('common.user.id')/*工号*/, dataIndex: 'employeeID'
      },{
        title: messages('credit-setting.key14')/*员工*/, dataIndex: 'fullName'
      },{
        title: messages('credit-setting.key108')/*帐套名称*/, dataIndex: 'setOfBooksName', render: text => <span>{text ? <Popover placement="topLeft" content={text} overlayStyle={{maxWidth: 400}}>{text}</Popover> : '-'}</span>
      },{
        title: messages('credit-setting.key3')/*信用类型*/, dataIndex: 'modelTypeId', render: modelTypeId => messages('credit-setting.key13')/*报销信用*/
      },{
        title: messages('credit-setting.key27')/*信用分*/, dataIndex: 'score'
      },{
        title: messages('credit-setting.key28')/*信用等级*/, dataIndex: 'creditRank'
      },{
        title: messages('credit-setting.key29')/*等级说明*/, dataIndex: 'rankComment', render: text => <span>{text ? <Popover placement="topLeft" content={text} overlayStyle={{width: 300}}>{text}</Popover> : '-'}</span>
      },{
        title: messages('common.operation')/*操作*/, dataIndex: 'operator', render: (value, record) => <Control><a data-control="credit-management.disabled" onClick={e => this.handleEdit(e, record)}>{messages('credit-setting.key30')/*调整*/}</a></Control>
      }],
      pagination: {
        total: 0
      },
      page: 0,
      size: 10,
      data: [],
      loading: false,
      searchParams: {}
    }
  }

  componentWillMount(){
    this.getList();
  }

  handleEdit = (e, record) => {
    e.stopPropagation();
    this.props.onEdit({
      user :[{
        fullName: record.fullName,
        userOID: record.userOID,
        setOfBooksId: record.setOfBooksId,
      }]
    })
  };

  getList = () => {
    const { page, size, searchParams } = this.state;
    this.setState({ loading: true });
    creditManagementService.getUsersCredit(Object.assign({}, searchParams, { page, size })).then(res => {
      this.setState({
        data: res.data,
        loading: false,
        pagination: {
          total: Number(res.headers['x-total-count']),
          onChange: this.onChangePager,
          current: page + 1
        }
      })
    }).catch(e => {
      this.setState({ loading: false });
      errorMessage(e);
    })
  };

  onChangePager = (page) => {
    if(page - 1 !== this.state.page)
      this.setState({page: page - 1}, this.getList)
  };

  search = result => {
    if(result.companyOID && result.companyOID.length > 0){
      result.companyOID = result.companyOID[0]
    }
    this.setState({ searchParams: result, page: 0 }, this.getList)
  };

  clear = () => {
    const { tenantMode, company } = this.props;
    if(tenantMode){
      this.setState({ searchParams: {}, page: 0 }, this.getList)
    } else {
      this.setState({ searchParams: { companyOID: company.companyOID }, page: 0 }, this.getList)
    }
  };

  handleRowClick = record => {
    this.props.onSelectEmployee(record)
  };

  render() {
    const { searchForm, pagination, columns, data, loading } = this.state;
    return (
      <Control>
        <div>
          <SearchArea
            searchForm={searchForm}
            submitHandle={this.search}
            clearHandle={this.clear}
          />
          <div className="table-header">
            <div className="table-header-title">{messages('common.total', { total: `${pagination.total}` })}</div>
            {/*共搜索到*条数据*/}
          </div>
          <Table
            columns={columns}
            size="middle"
            bordered
            pagination={pagination}
            loading={loading}
            dataSource={data}
            onRow={record => ({
              onClick: () => this.handleRowClick(record)
            })}
          />
        </div>
      </Control>
    )
  }
}

EmployeeCredit.contextTypes = {
  router: React.PropTypes.object
};

EmployeeCredit.propTypes = {
  onSelectEmployee: React.PropTypes.func,
  onEdit: React.PropTypes.func
};

function mapStateToProps(state) {
  return {
    company: state.login.company,
    tenantMode: state.main.tenantMode
  }
}

export default connect(mapStateToProps)(EmployeeCredit)
